<script lang="ts" setup>
import {
  ArrowLeft,
  ArrowRight,
  ChromeFilled,
  DArrowLeft,
  DArrowRight,
} from "@element-plus/icons-vue";
import { ElSelect, ElOption, ElButton } from "element-plus";

const props = defineProps({
  total: {
    type: Number,
    default: 1,
  },
  page: {
    type: Number,
    default: 1,
  },
  pageSize: {
    type: Number,
    default: 10,
  },
});

const options = computed(() => {
  const arr = [];
  for (let i = 1; i <= props.total; i++) {
    arr.push({ label: `第${i}页`, value: `第${i}页/共${props.total}页` });
  }
  return arr;
});

const value = ref(`第${props.page}页/共${props.total}页`);
const page_size = ref(props.pageSize);

const emits = defineEmits([
  "to_head",
  "to_end",
  "go",
  "back",
  "refresh",
  "pageSizeChange",
]);

const input = () => {
  console.log(1232131);
};
</script>

<template>
  <div class="flex justify-between">
    <div>
      <el-button :icon="DArrowLeft" @click="emits('to_head')"></el-button>
      <el-button :icon="ArrowLeft" @click="emits('back')"></el-button>
      <el-select :placeholder="value" style="width: 140px" @change="change">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button :icon="ArrowRight" @click="emits('go')"></el-button>
      <el-button :icon="DArrowRight" @click="emits('to_end')"></el-button>
      <el-button
        :icon="ChromeFilled"
        style="margin-left: 5px !important"
        @click="emits('refresh')"
      ></el-button>
    </div>
    <div class="flex *:m-0 mr-20 items-center">
      <div>共记录 {{ total }} 条，每页</div>
      <el-input
        style="width: 30px"
        v-model="page_size"
        @input="emits('pageSizeChange')"
        :max="100"
      />
      <div>条</div>
    </div>
  </div>
</template>

<style scoped>
button {
  margin: 0 !important;
}
</style>
